<template>
  <div class="user-detail">
    <h2>用户详细信息</h2>

    <!-- 实名认证信息卡片 -->
    <el-card class="auth-card">
      <div class="auth-header">
        <h3>实名认证信息</h3>
        <el-tag :type="authStatus === '已认证' ? 'success' : 'danger'">{{ authStatus }}</el-tag>
      </div>

      <div class="auth-body">
        <div v-if="authStatus === '未认证'">
          <p>当前未实名</p>
        </div>

        <!-- 已认证时显示用户信息 -->
        <div v-if="authStatus === '已认证'">
          <div class="user-info">
            <el-avatar :size="80" :src="userInfo.avatar" class="avatar" />
            <div class="user-details">
              <h3>{{ userInfo.name }}</h3>
              <p>手机号: {{ userInfo.phone }}</p>
              <p>身份证号: {{ authInfo.idNumber }}</p>
              <p>注册时间: {{ userInfo.registerDate }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="auth-footer">
        <el-button
          type="primary"
          @click="goToRealNameAuth"
          v-if="authStatus === '未认证'"
        >
          前往实名认证
        </el-button>
        <el-button
          type="info"
          disabled
          v-else
        >
          已认证
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios';

const router = useRouter()

// 用户信息
const userInfo = ref({
  name: '张用户',
  phone: '138****1234',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  registerDate: '2023-01-15'
})

// 认证状态和数据
const authStatus = ref('未认证')
const authInfo = ref({
  idNumber: ''
})

// 获取认证状态
const fetchAuthStatus = async () => {
  try {
    const phone = localStorage.getItem('phone');
    if (!phone) return;

    // 1. 获取用户ID
    const userDetailRes = await axios.get('http://127.0.0.1:8000/login/detail/', { params: { phone } });
    if (!userDetailRes.data.data || !userDetailRes.data.data.id) {
      return;
    }
    const userId = userDetailRes.data.data.id;

    // 2. 查询认证状态
    const authRes = await axios.get('http://127.0.0.1:8000/login/getuserauth/', {
      params: { user_id: userId }
    });

    if (authRes.data.data && authRes.data.data.name) {
      authStatus.value = '已认证'
      authInfo.value = {
        idNumber: authRes.data.data.id_number || '未获取'
      }
      userInfo.value.name = authRes.data.data.name
    } else {
      authStatus.value = '未认证'
      authInfo.value = {
        idNumber: ''
      }
    }
  } catch (error) {
    console.error('获取认证状态失败:', error);
    ElMessage.error('获取认证状态失败，请稍后重试');
  }
}

// 前往实名认证页面
const goToRealNameAuth = () => {
  router.push('/usercenter/auth')
}

onMounted(() => {
  fetchAuthStatus();
})
</script>

<style scoped>
.user-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.auth-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.auth-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.auth-body {
  padding: 15px 0;
  min-height: 80px;
}

.auth-body p {
  margin: 10px 0;
  color: #606266;
}

.auth-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.avatar {
  margin-right: 30px;
}

.user-details h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  color: #303133;
}

.user-details p {
  margin: 8px 0;
  color: #606266;
  font-size: 14px;
}
</style>